<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-plus" type="primary" v-on:click="handleAdd">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-popconfirm icon="el-icon-delete" title="确定删除吗？" @confirm="reallyChecked" style="margin-left: 5px;">
						<el-button slot="reference" type="danger">批量删除</el-button>
					</el-popconfirm>
					<!-- <el-button type="danger" v-on:click="batchDelete">批量删除</el-button> -->
				</el-form-item>

			</el-form>

		</el-col>

		<!--列表-->
		<template>
			<el-table :data="pageInfo.departments" highlight-current-row v-loading="loading" style="width: 100%;"
				@selection-change="handleSelectionChange">
				<!-- <el-table-column type="index" width="60">
				</el-table-column> -->
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="110" sortable>
				</el-table-column>
				<el-table-column prop="intro" label="介绍" width="110" sortable>
				</el-table-column>
				<el-table-column prop="manager.username" label="主管名字" width="110" sortable>
				</el-table-column>
				<el-table-column prop="parent.name" label="父部门名字" width="115" sortable>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="170" sortable>
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="170" sortable>
				</el-table-column>
				<el-table-column prop="path" label="路径" width="80" sortable>
				</el-table-column>
				<el-table-column prop="state" label="状态" width="140" sortable>
					<!-- <template slot-scope="scope">
						<el-tag :type="scope.row.state === 1 ? 'success' : 'danger'" disable-transitions>{{ scope.row.state
							=== 1 ? '启用' : '禁用' }}
						</el-tag>
					</template> -->
					<template slot-scope="scope">
						<el-switch 
							v-model="scope.row.state" 
							active-color="#13ce66" 
							@change="SwitchChange(scope.row)"
							:active-value="1" 
							:inactive-value="0" 
							inactive-color="#ff4949"
							active-text="启用"
							inactive-text="禁用"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template scope="scope">
						<el-button type="success" size="small" @click="handleEdit(scope.row)">编辑</el-button>
						<el-popconfirm 
							icon="el-icon-delete" 
							title="确定删除吗？" 
							@confirm="handleDel(scope.row.id)"
							style="margin-left: 5px;">
							<el-button slot="reference" size="small" type="danger">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination 
			background 
			@size-change="handleSizeChange" 
			@current-change="handleCurrentChange"
			:current-page="this.query.pageNumber" 
			:page-sizes="[5, 10, 20, 40]" 
			:page-size=this.query.pageSize
			layout="total, sizes, prev, pager, next, jumper" 
			:total=this.pageInfo.total>
		</el-pagination>

		<el-dialog 
			title="部门信息" 
			:visible.sync="dialogFormVisible" 
			:close-on-click-modal="false"
			:close-on-press-escape="false" 
			@close="cancel">
			<el-form :model="form">
				<el-form-item label="部门名字" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth">
					<el-input v-model="form.intro" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="主管" :label-width="formLabelWidth">
					<el-select v-model="form.manager" clearable value-key="id" placeholder="请选择">
						<el-option 
							v-for="item in employee" 
							:key="item.id" 
							:label="item.username" 
							:value="item">
							<span style="float: left">{{item.username }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{item.email }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="父部门" :label-width="formLabelWidth">
					<el-select 
						v-model="form.parent" 
						clearable value-key="id" 
						placeholder="请选择">
						<el-option 
							v-for="item in department" 
							:key="item.id" 
							:label="item.name" 
							:value="item">
							<span style="float: left">{{ item.name }}</span>
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="父部门" :label-width="formLabelWidth">
					<el-cascader
						clearable
    					v-model="form.parent"
    					:options="deptTree"
    					:props="{ 
							checkStrictly: true,
							label:'name',
							value:'id' 
						}"></el-cascader>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth">
					<el-radio-group v-model="form.state">
						<el-radio class="radio" :label="1">启用</el-radio>
						<el-radio class="radio" :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

	</section>
</template>
<script>
import { getUserList } from '../../api/api';
//import NProgress from 'nprogress'
export default {
	data() {
		return {
			// visible: false,
			loading: false,
			query: {
				pageNumber: 1,
				pageSize: 5,
				keyword: ''
			},
			pageInfo: {
				total: 0,
				departments: []
			},
			selectColumn: [],
			dialogFormVisible: false,
			form: {
				id: null,
				name: '',
				intro: '',
				manager: {
					id: null,
					username: ''
				},
				parent: {
					id: null,
					name: ''
				},
				state:''
			},
			formLabelWidth: '120px',
			employee: [],
			//下拉列表数据源
			//department: [],
			//级联选择器数据源
			deptTree:[]
		}
	},
	methods: {
		//请求部门树
		queryDeptTree(){
			this.$http.get('/department/deptTree')
				.then(res=>{
					if(res.data.code == 200){
						this.deptTree = res.data.data.deptTree;
					}else{
						this.$message({ message: '网络异常', type: 'error' });
					}
					
				}).catch(res=>{
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		//更改状态请求
		SwitchChange(event){
			this.form = event
			this.$http.post('/department/state', this.form)
				.then(res => {
					if (res.data.code == 200) {
						this.$message({ message: '更改状态成功', type: 'success' });
						this.getDepartments();
					} else {
						this.$message({ message: '更改状态失败', type: 'danger' });
					}
				}).catch(res => {
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		//编辑取消方法
		cancel() {
			this.dialogFormVisible = false
			this.getDepartments()
		},
		//部门列表
		departmentList() {
			this.$http.get('/department')
				.then(res => res.data).then(res => {
					//console.log(res);
					if (res.code == 200) {
						this.department = res.data.departments
					}else{
						this.$message({ message: '网络异常', type: 'error' });
					}
				})
				.catch(res => {
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		//获取所有员工
		getEmployees() {
			this.$http.get('/employee')
				.then(res => res.data).then(res => {
					//console.log(res);
					if (res.code == 200) {
						this.employee = res.data.employees
					}else{
						this.$message({ message: '网络异常', type: 'error' });
					}
				})
				.catch(res => {
					//console.log(res);
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		//编辑按钮触发事件
		handleEdit(row) {
			//console.log(val);
			this.dialogFormVisible = true
			this.departmentList();
			this.queryDeptTree();
			this.getEmployees();
			let temp = Object.assign({}, row);
			var pathurl = []
			var path = (temp.path || "").split('/')

			for (let i = 1; i < path.length-1; i++) {
				pathurl.push(parseInt(path[i]))
				
			}
			temp.parent = pathurl
			
			this.form = temp
			
		},

		//添加信息按钮触发事件
		handleAdd() {
			this.form = {
				name: '',
				intro: '',
				manager: {
					id: null,
					username: ''
				},
				parent: {
					id: null,
					name: ''
				},
				state:''
			}
			this.departmentList();
			this.getEmployees();
			this.queryDeptTree();
			this.dialogFormVisible = true
		},
		//保存信息网络请求
		save() {
			let addForm = this.form
			var parent = addForm.parent
			if(parent.constructor !== Object){
				var joins = "/" + parent.join("/");
				
				addForm.path = joins;
        		let pid = parent[parent.length - 1]
          		addForm.parent = {
          			id : pid,
          			name:""
         		}
			}
			this.$http.post('/department', addForm)
				.then(res => {
					//console.log(res);
					if (res.data.code == 200) {
						this.dialogFormVisible = false
						this.$message({ message: res.data.message, type: 'success' });
						this.getDepartments();
					} else {
						this.$message({ message: res.data.message, type: 'danger' });
					}
				}).catch(res => {
					this.$message({ message: '网络异常', type: 'error' });
				})
		},
		reallyChecked() {
			var ids = this.selectColumn.map(x => x.id);
			if (ids.length == 0) {
				this.$message({ message: '未选中消息', type: 'warning' });
				//return ;
			} else {
				this.batchDelete(ids)
			}
		},
		//批量删除
		batchDelete(ids) {
			//var ids = this.selectColumn.map(x => x.id);
			this.$http.patch("/department/", ids)
				.then(res => {
					if (res.data.code == 200) {
						this.$message({ message: '删除成功', type: 'success' });
						this.query.pageNumber = 1
						this.getDepartments();
					} else {
						this.$message({ message: '请联系管理员!', type: 'warning' });
					}
				}).catch(res => {
					this.$message({ message: '糟糕糟糕偶买噶，魔法怎么失灵了', type: 'warning' });
				})

		},
		// batchDelete() {
		// 	var ids = this.selectColumn.map(x => x.id);
		// 	if (ids.length == 0) {
		// 		this.$message({ message: '未选中消息', type: 'warning' });
		// 		return;
		// 	}
		// 	this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
		// 		confirmButtonText: '确定',
		// 		cancelButtonText: '取消',
		// 		type: 'warning'
		// 	}).then(() => {
		// 		this.$http.patch("/department/", ids)
		// 			.then(res => {
		// 				console.log(res);
		// 				if (res.data.code == 200) {
		// 					this.$message({ message: '删除成功', type: 'success' });
		// 					this.query.pageNumber = 1
		// 					this.getDepartments();
		// 				} else {
		// 					this.$message({ message: '请联系管理员!', type: 'warning' });
		// 				}
		// 			}).catch(res => {
		// 				this.$message({ message: '糟糕糟糕偶买噶，魔法怎么失灵了', type: 'warning' });
		// 			})
		// 	}).catch(() => {
		// 		this.$message({ type: 'info', message: '已取消删除' });
		// 	});

		// },
		handleSelectionChange(val) {
			this.selectColumn = val
		},
		handleDel(id) {
			this.$http.delete("/department/" + id)
				.then(res => {
					if (res.data.code == 200) {
						this.$message({ message: '删除成功', type: 'success' });
						this.query.pageNumber = 1
						this.getDepartments();
					} else {
						this.$message({ message: '请联系管理员!', type: 'danger' });
					}
				}).catch(res => {
					this.$message({ message: '糟糕糟糕偶买噶，魔法怎么失灵了', type: 'warning' });
				})

		},

		search() {
			this.query.pageNumber = 1;
			this.getDepartments();
		},
		handleSizeChange(val) {
			this.query.pageSize = val;
			this.query.pageNumber = 1;
			this.getDepartments();
		},
		handleCurrentChange(val) {
			this.query.pageNumber = val;
			this.getDepartments();
		},
		//获取部门列表
		getDepartments: function () {
			this.$http.put('/department', this.query)
				.then(res => res.data).then(res => {
					//console.log(res);
					if (res.code == 200) {
						this.pageInfo.departments = res.data.data.rows
						this.pageInfo.total = res.data.data.total

					}
				})
				.catch(res => {
					console.log(res);
				})
		}
	},
	mounted() {
		this.getDepartments();
		this.queryDeptTree();
	}
};

</script>

<style scoped></style>